<template>
  <el-select
    multiple
    filterable
    v-model="innerValue"
    v-bind="$attrs"
  >
    <slot />
  </el-select>
</template>

<script>

function rebuildValue(value, dataType){
  let arr = (value === null || value === undefined || value === '') ? [] : value.split(',');
  if(dataType === Number){
    arr = arr.map(item => parseInt(item, 10));
  }

  return arr;
}

export default {
  name: 'MultiSelect',
  props: {
    value: String,
    dataType:{
      type: Function,
      default: Number
    }
  },
  data() {
    let value = rebuildValue(this.value, this.dataType);
    return {
      innerValue: value
    }
  },
  watch: {
    value(newVal) {
      let value = rebuildValue(newVal, this.dataType);
      this.innerValue = value
    },
    innerValue(newVal) {
      if(newVal){

        let value = newVal.join(',');
        this.$emit('input', value)
      }
      else{
        this.$emit('input', null)
      }

    }
  }
}
</script>
